<template>
  <div class="data-statistics">
    <c-title text="数据统计"></c-title>
    <header class="header" >
      <van-image  v-if="agency_info &&  agency_info.has_one_member" round width="3.4375rem" height="3.4375rem"
        :src="agency_info.has_one_member.avatar_image" />
      <div class="user-info" v-if="agency_info && agency_info.has_one_member &&  agency_info.has_one_level">
        <p class="nick-name">{{ agency_info.has_one_member.nickname }}</p>
        <p class="level">{{ agency_info.has_one_level.level_name }}</p>
      </div>
      <div class="achievement">
        <span>累计团队业绩</span>
        <span class="money" v-if="agency_info.team_order_price">{{ $i18n.t('money') }}{{ agency_info.team_order_price }}</span>
      </div>
    </header>
    <div class="h-31"></div>
    <main class="main">
      <van-tabs v-model="active">
        <van-tab title="直推下级"></van-tab>
      </van-tabs>
      <template v-if="active == 0">
        <van-cell-group>
          <template v-if="list && list.length!==0">
            <van-cell v-for="item in list" :key="item.id">
              <template #title>
                <div class="flex align-center">
                  <van-image round width="2.1875rem" height="2.1875rem"
                    :src="item.has_one_member?item.has_one_member.avatar_image : ''" />
                  <div class="user-info">
                    <p class="nick-name">{{ item.has_one_member?item.has_one_member.nickname :''}}</p>
                    <p class="user-id">ID:{{ item.uid }}</p>
                  </div>
                </div>
              </template>
              <template #default>
                <div class="content-right">
                  <p class="tram">团队业绩：<span class="money">{{ $i18n.t('money') }}{{item.team_order_price}}</span></p>
                  <p class="tel">手机号：{{item.has_one_member?item.has_one_member.mobile : ''}}</p>
                </div>
              </template>
            </van-cell>
          </template>
        </van-cell-group>
      </template>
    </main>
    <van-empty v-if="list.length==0" description="暂无数据" />
  </div>
</template>
<script>
import { Image as VanImage } from 'vant';
import { scrollMixin } from '../../../utils/mixin';
export default {
  mixins: [scrollMixin],
  data() {
    return {
      agency_info: {},
      active: 0,
      list: [],
      page: 1,
      last_page: 1,
      loading: false,
      isLoadMore: true
    }
  },
  activated() {
    this.getData()
  },
  methods: {
    getData() {
      $http.get("plugin.love-speed-pool.frontend.statistic.index").then(res => {
        console.log(res)
        if (res.result == 0) {
          return this.$toast(res.msg)
        }
        this.agency_info = res.data.agency_info || {}
        this.list = res.data.child_list.data || [];
        this.last_page = res.data.child_list.last_page;
      })
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.last_page) {
        return
      }
      this.page = this.page + 1;
      $http.get("plugin.love-speed-pool.frontend.statistic.index", { page: this.page }).then(res => {
        this.isLoadMore = true;
        if (res.result == 0) {
          return this.$toast(res.msg)
        }
        this.list = this.list.concat(res.data.child_list.data);
        this.last_page = res.data.child_list.last_page;
        this.page = res.data.child_list.current_page
      })
    }
  },
  components: {
    VanImage
  }
}
</script>
<style lang="scss" scoped>
.data-statistics {
  ::v-deep .van-cell {
    margin-bottom: 0.625rem;
    border-radius: 0.3125rem;
  }

  ::v-deep .van-cell-group {
    background-color: unset;
  }

  .flex {
    display: flex;
  }

  .align-center {
    align-items: center;
  }

  .h-31 {
    height: 1.9375rem;
  }

  .header {
    background: #ff8924;
    position: relative;
    display: flex;
    padding: 1.2813rem 0 2.625rem 0.9688rem;
    text-align: left;

    .money {
      color: #f14e4e;
    }

    .achievement {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      left: 0.625rem;
      bottom: -1.25rem;
      background: #fff;
      width: 22.1875rem;
      height: 2.5rem;
      border-radius: 0.3125rem;
      padding: 0 0.8438rem;
    }

    .user-info {
      margin-left: 0.4375rem;
    }

    .nick-name {
      color: #fff;
    }

    .level {
      margin-top: 0.9688rem;
      text-align: center;
      border-radius: 0.625rem;
      font-size: 0.6875rem;
      padding: 0.2125rem 0.625rem;
      color: #ba750c;
      background: #fff;
    }
  }

  .main {
    margin: 0 0.625rem;

    .money {
      color: #f14e4e;
    }

    .tram {
      font-size: 0.75rem;
      color: #363636;
    }

    .tel {
      font-size: 0.6875rem;
    }

    .nick-name {
      font-size: 0.8125rem;
    }

    .user-info {
      margin-left: 0.4375rem;
      text-align: left;
    }

    .user-id {
      font-size: 0.6875rem;
      color: #696969;
    }
  }
}
</style>